import ButtonGroup, { Button } from "@/components/ButtonGroup";
import Picker from "@/components/Picker";

import { View } from "@tarojs/components";
import styles from "./index.scss";
import { Form } from "@nutui/nutui-react-taro";
import { useEffect, useState } from "react";
import Input from "@/components/Input";
import formConfig from "./form.config";
import Taro, { useRouter, showToast } from "@tarojs/taro";
import Upload from "@/components/Upload";
import { useRequest } from "taro-hooks";
import {
  addMaterial,
  getMaterialDetail,
  getMaterialTypeList,
  updateMaterial,
} from "@/services/Material";
import { getZoneList } from "@/services/MaterialZone";
import { useFamilyStore } from "@/model";
import DataPicker from "@/components/DataPicker";

export default () => {
  const { family } = useFamilyStore();
  const { params } = useRouter();
  const [form] = Form.useForm();
  const [type, setType] = useState();
  const { data: typeList } = useRequest(getMaterialTypeList);
  const { data: zoneList } = useRequest(getZoneList, {
    defaultParams: [family?.id],
  });
  const { run: getDetail } = useRequest(getMaterialDetail, {
    manual: true,
    onSuccess: (res) => {
      setType(res?.materialClassificationId);
      form.setFieldsValue({
        ...(res || {}),
        imgUrl: [res?.imgUrl],
      });
    },
  });

  useEffect(() => {
    if (params?.id) {
      Taro.setNavigationBarTitle({ title: "编辑物资" });
      getDetail(params?.id);
    }
  }, [params?.id]);

  return (
    <View className={styles.container}>
      <Form
        starPosition="right"
        className={styles.form}
        form={form}
        onFinish={async (v) => {
          console.log(v);
          const fun = params?.id ? updateMaterial : addMaterial;
          await fun({
            ...v,
            imgUrl: v.imgUrl[0],
            id: params?.id,
          });
          showToast({
            title: params?.id ? "编辑成功" : "新增成功",
            icon: "none",
            mask: true,
            duration: 1000,
            success: () => {
              setTimeout(() => {
                Taro.navigateBack();
              }, 1000);
            },
          });
        }}
      >
        <Form.Item
          label="图片"
          name="imgUrl"
          rules={[
            {
              required: true,
              message: "请上传图片",
            },
          ]}
        >
          <Upload maxCount={1} />
        </Form.Item>
        <Form.Item
          label="物资名称"
          name="name"
          rules={[
            {
              required: true,
              message: "请输入",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="描述"
          name="description"
          rules={[
            {
              required: true,
              message: "请输入",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="存放地"
          name="storageLocation"
          rules={[
            {
              required: true,
              message: "请输入",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="品牌"
          name="brand"
          rules={[
            {
              required: true,
              message: "请输入",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="数量"
          name="amount"
          rules={[
            {
              required: true,
              message: "请输入",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="单价"
          name="price"
          rules={[
            {
              required: true,
              message: "请输入",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="物资分区"
          name="materialZoneId"
          rules={[
            {
              required: true,
              message: "请上传图片",
            },
          ]}
        >
          <Picker
            options={zoneList?.map?.((i) => ({ text: i.name, value: i.id }))}
          />
        </Form.Item>
        <Form.Item
          label="分类"
          name="materialClassificationId"
          rules={[
            {
              required: true,
              message: "请选择分类",
            },
          ]}
        >
          <Picker
            onChange={(e) => {
              setType(e);
            }}
            options={typeList?.map?.((i) => ({ text: i.name, value: i.id }))}
          />
        </Form.Item>
        <Form.Item
          label="生产日期"
          name="productionDate"
          rules={[
            {
              required: true,
              message: "请选择生产日期",
            },
          ]}
        >
          <DataPicker placeholder="请选择" />
        </Form.Item>
        <Form.Item
          label="上次购买日期"
          name="last_purchase_time"
          rules={[
            {
              required: true,
              message: "请选择上次购买日期",
            },
          ]}
        >
          <DataPicker placeholder="请选择" />
        </Form.Item>
        {formConfig[type || ""]?.map?.((item) => {
          const { name, label, formRender, rules } = item;
          return (
            <Form.Item key={name} label={label} name={name} rules={rules}>
              {formRender}
            </Form.Item>
          );
        })}
      </Form>
      <ButtonGroup>
        <Button
          onClick={() => {
            Taro.navigateBack();
          }}
        >
          取消
        </Button>
        <Button type="primary" onClick={() => form.submit()}>
          确认
        </Button>
      </ButtonGroup>
    </View>
  );
};
